import React, { Component } from 'react';
import { connect } from 'react-redux';
import { SortableContainer, SortableElement, SortableHandle, arrayMove } from 'react-sortable-hoc';
import { Select } from 'antd';
import { actions } from '../action/action';
import staticData from '../static/index';

import PieGraph from './pieGraph';
import BarGraph from './barGraph';
import LineGraph from './lineGraph';



// 带有筛选条件的柱状图报表
const FilterBarGraphItem = SortableElement(({ time, value }) => <div className="col-xs-12 col-md-6"><BarGraph time={time} options={staticData.trafficOptionsList[value.keyIndex]} data={value} /></div>);
// 不带有筛选条件的柱状图报表
const BarGraphItem = SortableElement(({ time, value }) => <div className="col-xs-12 col-md-6"><BarGraph time={time} options={staticData.trafficOptionsList[value.keyIndex]} data={value} /></div>);
// 各个饼图报表
const PieGraphItem = SortableElement(({ time, value }) => <div className="col-xs-12 col-md-6"><PieGraph time={time} options={staticData.pieOptionsMap[value.keyIndex]} data={value} /></div>);
// 曲线图报表
const LineGraphItem = SortableElement(({ time, value }) => <div className="col-xs-12 col-md-6"><LineGraph time={time} options={staticData.trafficOptionsList[value.keyIndex]} data={value} /></div>);

// 拖拽按钮
export const DragHandle = SortableHandle(() => <div className="drag-icon"></div>); // This can be any component you want


const SortableList = SortableContainer(({ time, items }) => {
    return (
        <div>
            {
                items.length > 0 && items.map((item, index) => {
                    return item && item.index == 0 ? <FilterBarGraphItem key={`item-${index}`} index={index} time={time} value={item || { name: '', data: [] }} />
                        : item && item.index == 1 ? <BarGraphItem key={`item-${index}`} index={index} time={time} value={item || { name: '', data: [] }} />
                            : item && item.index == 2 ? <PieGraphItem key={`item-${index}`} index={index} time={time} value={item || { name: '', data: [] }} />
                                : item && item.index == 3 ? <LineGraphItem key={`item-${index}`} index={index} time={time} value={item || { name: '', data: [] }} />
                                    : ''
                })
            }

            <div className="col-xs-12 col-md-6">
                <div className="box box-solid add-dashboard">
                    <div className="box-body"></div>
                </div>
            </div>
        </div>
    );
});


const _BarGraph = connect(
    state => {
        return {
            condition: state.time,
            conditionList: staticData.conditionList
        }
    },
    dispatch => {
        return {
            changeCondition: (value) => {
                actions.getTrafficData(dispatch, value);
            }
        }
    }
)(BarGraph);

class GetData extends Component {
    componentWillMount() {
        let time = this.props.time;
        this.getData(time);
    }
    componentDidUpdate() {
        let time = this.props.time;
        this.getData(time);
    }
    getData(time) {
        this.props.getOccupy('traffic', time); // 客流量
        this.props.getOccupy('total', time); // VIP好普通顾客占比
        this.props.getOccupy('gender', time); // 性别占比
        this.props.getOccupy('age', time); // 各年龄段人数
        this.props.getOccupy('sequential', time); // 最近7天环比
        this.props.getOccupy('vipIncrease', time); // VIP客户增加对比图
        this.props.getOccupy('amountAndCount', time); // 销售额和客流量对比
        this.props.getOccupy('vipAmountAndCount', time); // 销售额和客流量对比
        
    }
    render() {
        return (<div></div>);
    }
}

const _GetData = connect(
    state => {
        return {
            time: state.time,
            trigger: state.trigger,

        }
    },
    dispatch => {
        return {
            getOccupy: (type, time) => {
                actions.getOccupy(type, time, dispatch);
                dispatch({
                    type: 'set-traffic-loading',
                    val: type
                });
            },
        }
    }
)(GetData);


class TrafficDashboard extends Component {

    onSortEnd({ oldIndex, newIndex }) {
        let items = arrayMove(this.props.items, oldIndex, newIndex);
        this.props.sortItems(items);
    }
    render() {
        const { items, time } = this.props;
        return <div>
            <_GetData />
            <SortableList axis="xy" time={time} items={items} onSortEnd={this.onSortEnd.bind(this)} useDragHandle={true} />
        </div>
    }
}

const _TrafficDashboard = connect(
    state => {
        return {
            items: state.items,
            time: state.time

        }
    },
    dispatch => {
        return {
            sortItems: (items) => {
                dispatch({
                    type: 'sort-items',
                    val: items
                });
            },

        }
    }
)(TrafficDashboard);

export default _TrafficDashboard;